<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
            <el-breadcrumb-item>面经后台</el-breadcrumb-item>
            <el-breadcrumb-item>面经管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <template #header>
                <div class="header">
                    <p>共 {{ total }} 条记录</p>
                    <el-button icon="el-icon-plus" size="small" type="primary" round @click="add">
                        添加面经
                    </el-button>
                </div>
            </template>
            <el-table :data="form" style="width: 100%">
                <el-table-column prop="stem" label="标题" width="400">
                </el-table-column>
                <el-table-column prop="creator" label="作者">
                </el-table-column>
                <el-table-column prop="likeCount" label="点赞">
                </el-table-column>
                <el-table-column prop="views" label="浏览数">
                </el-table-column>
                <el-table-column prop="createdAt" label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <div class="actions">
                            <i class="el-icon-view" @click="openDrawer('preview', row.id)"></i>
                            <i class="el-icon-edit-outline" @click="openDrawer('edit', row.id)"></i>
                            <i class="el-icon-delete" @click="del(row.id)"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                :current-page="current" :page-size="pageSize" :total="total" class="pages">
            </el-pagination>

        </el-card>
        <el-drawer :title="drawerTitle" :visible.sync="drawer" size="50%" class="drawersss">

            <div v-if="drawerType === 'preview'" class="article-preview">
                <h5 class="previewtitle">{{ list.stem }}</h5>
                <div v-html="list.content"></div>
            </div>

            <el-form v-else ref="list" :model="list" :rules="rules" label-width="80px">
                <el-form-item label="标题" prop="stem">
                    <el-input v-model="list.stem" placeholder="请输入面经标题"></el-input>
                </el-form-item>

                <el-form-item label="内容" prop="content">
                    <!-- 富文本编辑器  第三方的插件，组件需要单独注册 -->
                    <!-- quill-editor不是element的表单控件，他的失去焦点，不是el-form能直接监听到的 -->
                    <quill-editor @blur="$refs.list.validateField('content')" v-model="list.content"></quill-editor>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit">确认</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </el-form-item>
            </el-form>


        </el-drawer>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getArticleList, getArticleDetail, createArticle, updateArticle, removeArticle } from "@/api/article.js";
export default {
    data() {
        return {
            drawer: false,
            drawerType: '',
            current: 1,
            pageSize: 10,
            total: 0,
            form: [],
            list: {
                stem: '',
                content: ''
            },
            rules: {
                stem: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
            }
        }
    },
    components: {
        quillEditor
    },
    created() {
        this.initData()
    },
    computed: {
        drawerTitle() {
            if (this.drawerType === 'add') {
                return '添加面经'
            } else if (this.drawerType === 'preview') {
                return '预览面经'
            } else {
                return '编辑面经'
            }
        }
    },
    methods: {
        async openDrawer(msg, id) {
            this.drawer = true
            const res = await getArticleDetail(id).catch(err=>{

            })
            console.log(res.data);
            this.list = res.data
            if (msg == 'preview') {
                this.drawerType = 'preview'

            } else {
                this.drawerType = 'edit'
            }

        },
        add() {
            this.drawer = true
            this.drawerType = 'add'
            this.list = {
                stem: '',
                content: ''
            }

        },
        del(id) {
            removeArticle(id).catch(err => {
            })
            this.$message({
            message: '恭喜你，删除成功',
            type: 'success'
        });
            this.initData()
        },
        initData() {
            getArticleList({
                current: this.current,
                pageSize: this.pageSize
            }).then(res => {
                // console.log(res.data);
                this.form = res.data.rows
                this.total = res.data.total
            }).catch(err => {

            })
        },
        handleCurrentChange(val) {
            // 改变页码
            this.current = val
            this.initData()
        },
        async submit() {
            try {
                if (this.drawerType === 'add') {

                    await createArticle(this.list)
                    this.$message({
                        message: '恭喜你，添加成功',
                        type: 'success'
                    });
                    this.current = 1
                } else if (this.drawerType === 'edit') {
                    const { stem, content, id } = this.list
                    await updateArticle({ stem, content, id })
                    this.$message({
                        message: '恭喜你，编辑成功',
                        type: 'success'
                    });
                } else {
                    return
                }
                this.initData()
                this.handleClose()
            } catch (error) {

            }

        },
        handleClose() {
            this.drawer = false

        }

    },
}
</script>

<style lang="scss" scoped>
.box-card {
    margin-top: 30px;
    min-width: 1300px;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
            background-color: #727CF5;
        }
    }

    .actions {
        display: flex;
        justify-content: space-around;

        i {
            font-size: 20px;
        }
    }

    .pages {
        text-align: center;
    }
}

.article-preview {
    padding: 0 40px 40px 40px;

    .previewtitle {
        font-size: 20px;
        color: #666;
        padding-bottom: 30px;
        border-bottom: 1px dashed #ccc;
        margin-bottom: 20px;
    }

}

.quill-editor {
    ::v-deep .ql-editor {
        height: 300px;
    }
}
</style>